<template>
  <div v-if="user != null" class="user-info-page">

    <van-cell-group inset class="user-header-card">
      <div style="display: flex;align-items: center;margin-left: 20px">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <van-image
            round
            width="60"
            height="60"
            fit="cover"
            :src="user.avatarUrl"
        />
        <div style="margin-left: 10px">
          <div style="margin-bottom: 5px">{{user.username}}</div>
          <div style="display:flex;align-items: center">
            <van-tag mark type="warning" v-if="user.userStatus == 2">LV会员</van-tag>
            <van-tag mark type="warning" v-else>非会员</van-tag>
            <van-image src="http://120.26.146.100:8889/public/member.png" style="width: 20px;height: 20px" v-if="user.userStatus == 2"/>
            <van-image src="http://120.26.146.100:8889/public/nomember.png" style="width: 20px;height: 20px" v-else/>
          </div>
        </div>
      </div>
      <!--      <van-cell title="头像" is-link @click="toEditPage('avatarUrl','头像',user?.avatarUrl)">-->
      <!--      </van-cell>-->
    </van-cell-group>


    <van-cell-group inset class="user-info-card">
      <van-cell title="性别"  :value="user.gender === 0 ? '男' : '女'"/>
      <van-cell title="邮箱"  :value="user.email"/>
      <van-cell title="手机号码"  :value="user.phone"/>
      <van-cell title="角色"   :value="user.userRole === 0 ? '普通成员' : '管理员'"/>
      <van-cell title="个人简介">
        <van-text-ellipsis
            rows="3"
            :content="user.personalProfile"
            expand-text="展开"
            collapse-text="收起"

        />
      </van-cell>


      <van-collapse v-model="tagActive" accordion>
        <van-collapse-item name="1">
          <template #title>
            <div style="display: flex;align-items: center">
              <svg style="margin-right: 2px" t="1724080369563" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="2335" width="15" height="15">
                <path d="M163.229994 1023.786711c-19.537263 0-37.197584-7.934347-49.738971-22.224703-11.389627-13.053281-17.404374-30.031077-17.404374-49.141762V85.315559c0-47.051531 38.264028-85.315559 85.315559-85.315559h682.524474c47.051531 0 85.315559 38.264028 85.315559 85.315559v867.062029c0 40.652864-28.794001 71.323808-66.972714 71.323808-10.707103 0-21.499521-2.431493-32.035992-7.12385l-304.149969-178.48015c-7.251823-3.241991-36.173797-3.369965-43.340304-0.127973L195.052697 1016.748177a77.637159 77.637159 0 0 1-31.822703 7.038534zM181.402208 85.315559v844.197459l286.788252-169.522016c20.006499-8.872818 41.50602-10.74976 56.009665-10.749761 14.674276 0 36.429744 1.9196 56.692189 10.96305l283.077026 169.05278V85.315559H181.402208z" fill="#000000" p-id="2336">
                </path>
              </svg>
              <span>查看标签</span>
            </div>
          </template>

        <!-- 下拉后展示区域 -->
          <div>
            <span v-for="tag in tags" style="margin-right: 4px">
              {{tag}}
            </span>
          </div>

        </van-collapse-item>
      </van-collapse>


    </van-cell-group>


    <div class="add-friend-btn-container">
      <van-button round size="normal" type="primary" block @click="addFriendApply">
        {{isAddFriendClick == false ? '添加好友' : '等待回复'}}
      </van-button>
    </div>


  </div>

  <!-- 好友申请的方法 -->
  <van-action-sheet v-model:show="showApplyAdd" title="申请添加朋友">
    <div class="content">
      <div style="font-size: 12px;margin-left: 18px;margin-bottom: 10px">发送添加朋友申请</div>
      <van-cell-group inset>
        <van-field type="textarea" v-model="applyContent" style="background-color: #fffbe8" placeholder="输入添加理由"/>
      </van-cell-group>

      <div style="font-size: 12px;margin-left: 18px;margin-bottom: 10px;margin-top: 10px">用户名</div>

      <van-cell-group inset>
        <van-field type="text" style="background-color: #fffbe8" disabled v-model="user.username"/>
      </van-cell-group>

      <van-divider></van-divider>
      <van-divider></van-divider>
      <van-divider></van-divider>

      <van-button type="success" size="large" @click="toMsgAddFriend">发送申请</van-button>

    </div>
  </van-action-sheet>

</template>


<script setup lang="ts">
//数据库中获取
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {userStore} from "../stores/user/user.ts";
import {connectionSendAddApply, onIsConnect} from "../ws/socketWork.ts";
import {showToast} from "vant";


const router = useRouter();
const userStoreAPI = userStore();
//当前展示的详情信息的用户
const user = ref();
const tags = ref();


//当前登录的用户
const currentUser = ref();
//申请内容
const applyContent = ref('');


const isAddFriendClick = ref(false);
const showApplyAdd = ref(false);
const tagActive = ref('0');


//添加好友的方法
const addFriendApply = () => {
  showApplyAdd.value = true;
};


//发送添加好友信息
const toMsgAddFriend = async ()=>{
  //判断输入的申请内容
  if (applyContent.value === ''){
    showToast('填写申请添加');
    return;
  }
  if (isAddFriendClick.value){//已经添加过了
    return;
  }

  console.log('申请信息',applyContent.value);

  //构造发送消息给服务端
  connectionSendAddApply(currentUser.value.id,applyContent.value,user.value.id);
  isAddFriendClick.value = true;
  applyContent.value = '';
  showApplyAdd.value = false;
}




onMounted(async ()=>{
  //去pina拿数据 //阻塞拿到数据，因为刷新页面pina可能就没数据，发送请求时，异步了，所有变成一定的阻塞
  user.value = await userStoreAPI.getOtherUserInfo();
  console.log('otherUserInfo',user.value);
  if (user.value.tags != null){
    console.log('tags',user.value.tags);
    tags.value = user.value.tags;
  }
  //拿到当前用户信息

  currentUser.value = await userStoreAPI.getCurrentUser();
  onIsConnect(currentUser.value.id);
  console.log('currentUser',currentUser.value);
});

</script>

<style scoped>
.user-info-page {
  background-color: #f7f8fa;
  padding-top: 10px;
  min-height: 100vh;
  padding-bottom: 20px;
}

.user-header-card {
  height: 80px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px;
}

.user-info-card {
  margin-top: 10px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px;
}

.add-friend-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 0 16px;
}

/* 确保van-cell-group内部的样式 */
:deep(.van-cell-group--inset) {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

:deep(.van-cell) {
  background-color: #fff;
}
</style>